<template>
	<view class="charts-box">
		<view class="mouth" @click="handleShowPop">
			<span class="span">{{mValue}}</span>
			<u-icon name="arrow-down-fill"></u-icon>
		</view>
		<canvas v-show='showCharts' canvas-id="byrewlagLzoTmqeexdAURhMjqONNmwJi" id="byrewlagLzoTmqeexdAURhMjqONNmwJi"
			:class="empty?'charts-none':'charts'" @touchend="tap" />
		<u-empty :show='empty' mode="data" text="暂无数据"></u-empty>

		<u-popup :show="showMouth" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(item)" v-for="(item,index) in mOption" :key="index">
					{{item.text}}
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
		props: {
			current: {
				type: Number,
				default () {
					return 0;
				}
			},
		},
		
		data() {
			return {
				cWidth: 750,
				cHeight: 500,
				time: '',
				path: '/device/mobile/deviceRepair/pieChartCensus',
				empty: false,
				mOption: [],
				mValue: '',
				showMouth: false,
				showCharts:true,
			};
		},
		watch: {
			/* val监听改变的值*/
			current(val) {
				if (val == 0) {
					this.path = '/device/mobile/deviceRepair/pieChartCensus'
				} else if (val == 1) {
					this.path = '/device/mobile/deviceMaintainTask/maintainTypeProportion'
				} else if (val == 2) {
					this.path = '/device/mobile/deviceCheckTask/checkTypeProportion'
				}
				this.getServerData(this.path);
			},
			showMouth(val){
				this.showCharts=!val
				uni.$emit('handleShowCharts', val);
			}
		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(750);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(600);
			//这里获取本地时间的年月格式：YYYY-MM
			this.time = this.getYM();
			//获取时间列表以及当前的是时间值
			this.getTimeList()
			this.getServerData(this.path);
		},
		methods: {
			getServerData(path) {
				//根据不同接口返回不同数据并渲染
				uni.$u.http.get(`${path}/${this.time}`).then(response => {
					if (response.code == 0) {
						const dataInfo = response.data
						if (!dataInfo || dataInfo.length <= 0) {
							this.empty = true
						} else {
							this.empty = false
						}
						let data = []
						if (!this.empty) {
							if (this.current == 0) {
								data = [{
										name: '正常报修',
										value: dataInfo.regularCount
									},
									{
										name: '维保报修',
										value: dataInfo.maintainCount
									},
									{
										name: '点检报修',
										value: dataInfo.checkCount
									},
								]
							} else if (this.current == 1) {
								data = dataInfo.map(item => {
									let obj = {
										name: item.name,
										value: item.value
									}
									return obj
								})
							} else if (this.current == 2) {
								data = dataInfo.map(item => {
									let obj = {
										name: item.name,
										value: item.value
									}
									return obj
								})
							}
						}
						let res = {
							series: [{
								data: data
							}]
						}
						this.drawCharts('byrewlagLzoTmqeexdAURhMjqONNmwJi', res);
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "ring",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: data.series,
					animation: true,
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					background: "#FFFFFF",
					color: ["#0F53AC", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25,
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							centerColor: "#FFFFFF",
							customRadius: 0,
							linearType: "none"
						},
						tooltip: {
							showBox: true,
							showArrow: false,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 13,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},
			//打开月份弹窗
			handleShowPop() {
				this.showMouth = true
			},
			open() {},
			close() {
				this.showMouth = false
			},
			updateItem(item) {
				console.log(item)
				this.mValue = item.text
				this.time = item.value
				this.getServerData(this.path)
				this.showMouth = false;
			},
			//获取年月
			getYM() {
				let myDate = new Date()
				let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				myMonth = myMonth > 9 ? myMonth : '0' + myMonth
				let nowDate = myYear + '-' + myMonth
				return nowDate
			},
			//获取时间列表
			getTimeList() {
				let myDate = new Date()
				let myYear = myDate.getFullYear();
				let myMonth = myDate.getMonth() + 1;
				this.mValue = myMonth + '月'
				for (let i = 1; i <= myMonth; i++) {
					let month = i > 9 ? i : '0' + i
					let nowDate = myYear + '-' + month
					this.mOption.push({
						text: i + '月',
						value: nowDate,
					})
				}
			},
		}
	};
</script>

<style lang="scss">
	.charts-box {
		background-color: #fff;
		height: 650rpx;
		

		.mouth {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 48rpx;
			padding-right: 32rpx;
			margin-top: 32rpx;
			
			.span{
				margin-right: 16rpx;
			}
		}

		.charts {
			width: 750rpx;
			height: 600rpx;
			margin: 0 auto;
		}

		.charts-none {
			width: 0rpx;
			height: 180rpx;
		}
	}
</style>